<template>
  <div class="scroll-y">
    <div class="header-container">
      <el-card v-if="!multipleSelection.length" shadow="always">
        <DynamicFilter />
        <span class="query">
          <span>
            <r-form-column>
              <el-button size="default" @click="handleAddfilterDialog">
                <svg-icon icon-class="screen" />
              </el-button>
            </r-form-column>
            <DynamicTag />
            <r-form-column>
              <el-select v-model="form.name" placeholder="地区" size="default">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
            </r-form-column>
          </span>
          <span>
            <el-button type="primary" size="default">新增</el-button>
          </span>
        </span>
      </el-card>

      <el-card v-if="multipleSelection.length" shadow="always">
        <span class="query">
          <span>
            <r-form-column>
              <span style="border-left: 3px solid #326be6; padding-left: 5px">
                已选：{{ multipleSelection.length }}项
              </span>
            </r-form-column>
          </span>
          <span>
            <r-form-column>
              <el-button size="default" :icon="Upload">导出</el-button>
            </r-form-column>
            <r-form-column>
              <el-button type="danger" :icon="Delete">删除</el-button>
            </r-form-column>
          </span>
        </span>
      </el-card>
    </div>
    <el-card shadow="always" style="margin-top: 10px">
      <el-table :data="tableList" style="width: 100%" height="65vh" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" />
        <template v-for="(item, index) in tHeader.columns">
          <table-column v-if="item === 'ID'" :key="index" prop="id" label="ID" />
          <table-column v-if="item === '时间'" :key="index" prop="date" label="时间" width="200" column-key="date" />
          <table-column v-if="item === '姓名'" :key="index" prop="name" label="姓名" />
          <table-column v-if="item === '地区'" :key="index" prop="province" label="地区" />
          <table-column v-if="item === '城市'" :key="index" prop="city" label="城市" />
          <table-column v-if="item === '地址'" :key="index" prop="address" label="地址" width="220px" />
        </template>
        <el-table-column align="right">
          <template #header>
            <svg-icon class="setup" icon-class="setup" :table-id="1" @click="handleOpenTHeaderSettingDialog" />
          </template>
          <template #default="scope">
            <el-button type="text" size="small" @click="handleEdit(scope.row)">Edit</el-button>
          </template>
        </el-table-column>
      </el-table>
      <Pagination
        v-model:page="pages.page"
        v-model:total="pages.total"
        v-model:limit="pages.size"
        @pagination="getData"
      />
    </el-card>
    <FilterDialog ref="filterDialogRef" destroy-on-close />
    <THeaderSettingDialog ref="THeaderSettingDialogRef" destroy-on-close @updateTHeaders="updateTHeadersEmit" />
    <editPreview ref="editPreviewRef"></editPreview>
  </div>
</template>

<script setup lang="ts" name="Table">
import { Delete, Upload } from '@element-plus/icons-vue'
import { toRefs, reactive, onBeforeMount } from 'vue'
import { getList, getHeader } from '@/api/table'
import Pagination from '@/components/table/Pagination/index.vue' // secondary package based on el-pagination
import TableColumn from '@/components/table/TableColumn/index.vue'
import FilterDialog from '@/components/table/FilterDialog/index.vue'
import THeaderSettingDialog from '@/components/table/THeaderSettingDialog/index.vue'
import RFormColumn from '@/components/table/FormColumn/index.vue'
import DynamicFilter from '@/components/table/DynamicFilter/index.vue'
import DynamicTag from '@/components/table/DynamicTag/index.vue'
import { pagesType } from './type'
import editPreview from './editPreview.vue'
import _ from 'lodash'
import type { Ref } from '@vue/reactivity'
import { log } from 'console'
const form = reactive({
  name: '',
  rank: ''
})
const pages = reactive<pagesType>({
  total: 0,
  size: 10,
  page: 1
})
const tableData = reactive({
  multipleSelection: [],
  tableList: [],
  visible: false,
  options: [
    {
      value: 'shanghai',
      label: '上海'
    }
  ]
})
onBeforeMount(async () => {
  getData()
  var res = await getHeader()
  tHeader.columns = res.data
})
const handleSelectionChange = (val: never[]) => {
  tableData.multipleSelection = val
}

// 表格列互换，显示或隐藏数据
const THeaderSettingDialogRef = ref()
const handleOpenTHeaderSettingDialog = () => {
  THeaderSettingDialogRef.value.dialogVisible = true
}

const tHeader = reactive({
  columns: []
})
const updateTHeadersEmit = (v: never[]) => {
  tHeader.columns = v
}
// 表头筛选数据
const filterDialogRef = ref()
const filterHandler = (value: any, row: { [x: string]: any }, column: { [x: string]: any }) => {
  const property = column['property']
  return row[property] === value
}
const handleHeaderClick = (column: any, event: any) => {
  tableData.visible = true
}
const handleAddfilterDialog = () => {
  filterDialogRef.value.dialogVisible = true
}
// 分页
const pagination = reactive({
  currentPage1: 5,
  currentPage2: 5,
  currentPage3: 5,
  currentPage4: 4
})

const { multipleSelection, tableList, options } = toRefs(tableData)
const getData = async () => {
  var res = await getList(pages)
  tableData.tableList = res.data.items
  pages.total = res.data.total
}

//edit

const editPreviewRef = ref()

const handleEdit = (row: Ref<object>) => {
  editPreviewRef.value.showDrawer(row)
}
</script>

<style scoped lang="scss">
@import '@/styles/variables.scss';
::v-deep(.el-collapse) {
  --el-collapse-border-color: #ffffff;
  --el-collapse-header-height: 36px;
}
.query {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.setup {
  cursor: pointer;
}
</style>
